<template>
  <div>
    <div class="head">
      <h1>{{schTableData.name}}</h1>
    </div>

    <div class="second-contain-box ma">
      <el-row>
        <el-col :span="12">
          <span>跟进次数：</span>
          <span>{{schTableData.trackingNum}}</span>
        </el-col>
        <el-col :span="12">
          <span>跟进时间：</span>
          <span>{{schTableData.trackingDate}}</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="inputbox">联系人：{{schTableData.contactTrack}}</div>
        </el-col>
        <el-col :span="12">
          <span>沟通形式：{{schTableData.communicationTypeName}}</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <span>客户类型：{{schTableData.typeName}}</span>
        </el-col>
        <el-col :span="12">
          <span>客户进展：{{schTableData.progressName}}</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="inputbox">沟通内容：{{schTableData.communicationContent}}</div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <span>跟进人：{{trackingPeople}}</span>
        </el-col>
        <el-col :span="12">
          <div class="inputbox">下次跟进日期：{{schTableData.nextTrackingDateDetail}}</div>
        </el-col>
      </el-row>
    </div>
    <KtButton
      :label="$t('action.close')"
      perms="true"
      size="medium"
      type="primary"
      style="margin-top: 2%;"
      @click="closeSelectedTag()"
    ></KtButton>
  </div>
</template>
<script>
import { hasPermission } from "@/permission/index.js";
import axios from "axios";
import KtButton from "@/views/Core/KtButton";
import api from "@/http/api";
import StTable from "@/views/Core/StTable";
import Cookies from "js-cookie";
export default {
  name: "SchoolFollow",
  components: {
    KtButton,
    StTable
  },
  data() {
    return {
      filters: {
        name: ""
      },
      student_communication_type: [],
      student_progress_options: [],
      trackingPeople: Cookies.get("realName"),
      selection: false,
      schTableData: {
        name: this.$route.query.name
      },
      // 客户跟进数据
      followdata: []
    };
  },
  watch: {
    // $route: "getParams"
  },
  beforeMount: function() {
    //   请求页面传过来的ID根据ID发送请求
    let routerParams = this.$route.query;
  },

  methods: {
    getPageData: function() {
      this.$api.school
        .trackDetail({
          id: this.$route.query.id
        })
        .then(res => {
          this.schTableData = res.trackLists[0];
          //转换沟通形式
          this.student_communication_type.forEach(communication_type => {
            if (communication_type.key == this.schTableData.communicationType) {
              this.schTableData.communicationTypeName =
                communication_type.value;
            }
          });

          //转换客户类型
          this.student_type_options.forEach(student_type => {
            if (student_type.key == this.schTableData.typeTrack) {
              this.schTableData.typeName = student_type.value;
            }
          });

          //转换客户进展
          this.student_progress_options.forEach(progress_type => {
            if (progress_type.key == this.schTableData.progressTrack) {
              this.schTableData.progressName = progress_type.value;
            }
          });
        });
    },

    hasPerms: function(perms) {
      // 根据权限标识和外部指示状态进行权限判断
      return hasPermission(perms) & !this.disabled;
    },
    handleClose() {
      this.$router.push({ path: "/Customer/School" });
    },

    isActive(route) {
      return route.path === this.$route.path;
    },
    closeSelectedTag(view) {
      this.$store.dispatch("delVisitedViews", this.$route).then(views => {
        if (this.isActive(this.$route)) {
          const latestView = views.slice(-1)[0];
          if (latestView) {
            this.$router.push(latestView);
          } else {
            this.$router.push("/");
          }
        }
      });
    },

    // 客户类型
    get_student_type() {
      this.student_type_options=JSON.parse(localStorage.getItem('schoolType'))
    },

    // 客户进展
    get_student_progress() {
      this.student_progress_options=JSON.parse(localStorage.getItem('schoolProgress'))
    },

    // 沟通方式
    get_contractType() {
      this.student_communication_type=JSON.parse(localStorage.getItem('contractType'))
    }
  },

  mounted() {
    this.get_student_type();
    this.get_student_progress();
    this.get_contractType();
    this.getPageData();
  }
};
</script>
<style lang='scss' scoped>
.second-contain-box {
  width: 95%;
  margin: 0 auto;
  .el-col {
    text-align: left;
    margin: 20px 0;
  }
}
.inputbox {
  display: flex;
  flex-direction: row;
  span {
    display: block;
    width: 10%;
  }
  .el-input {
    width: 50%;
  }
  .el-textarea {
    float: left;
    margin-left: -4%;
  }
}
</style>






